<template>
    <div class="popular-anchor-item">
        <div>
            <n-image
                width="40"
                :src="avatarUrl"
            />
        </div>
        <div class="item-info">
            <p class="item-anchor-name">{{nickName}}</p>
            <p class="item-anchor-info">{{info}}</p>
        </div>
    </div>
    
</template>

<script>
import {NImage} from 'naive-ui';
import {onMounted, ref} from "vue";
import {getUserDetail} from "@/network/user";
export default {
    name: "PopularAnchorItem",
    components: {
        NImage
    },
    props: {
        id: Number,
        nickName: String,
        avatarUrl: String
    },
    setup(props) {
        const info = ref('');
        onMounted(() => {
            getUserDetail(props.id).then(res => {
                if (typeof res.data.profile.mainAuthType === 'undefined') {
                    return null;
                }
                info.value = res.data.profile.mainAuthType.desc;
            })
        })
        return {
            info
        }
    }
}
</script>

<style scoped lang="scss">
.popular-anchor-item {
    @apply flex my-2;
    .item-info {
        .item-anchor-name {
            @apply mx-2 font-light text-sm text-black my-0 hover:underline cursor-pointer;
        }
        .item-anchor-info {
            @apply mx-2;
            color: #666666;
        }
    }
}
</style>